<template>
  <div class="gearecharge">
    <div class="header">
      <table>
        <tr>
          <td>
            <span>服务器：</span>
            <Server ref="ServerChild" :showServer="showServer" />
          </td>
          <td>
            <span>起止时间：</span>
            <el-date-picker
              v-model="first_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </td>
          <td>
            <span>结束时间：</span>
            <el-date-picker
              v-model="last_time"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </td>
          <td>
            <el-button type="primary" @click="search()">查询</el-button>
          </td>
          <td style="font-size: 20px">
            <span>期间总充值：</span>
            <span>{{ total_recharge }}</span>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main v-loading="loading">
        <el-table
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          border
          @sort-change="sortChange"
          :fit="true"
          :data="tableData"
        >
         <el-table-column
            prop="server_id"
            sortable="custom"
            label="服务器"
          ></el-table-column>
          <el-table-column
            prop="dollar"
            sortable="custom"
            label="单价"
          ></el-table-column>
          <el-table-column
            prop="sum_of_money"
            sortable="custom"
            label="金额"
          ></el-table-column>
          <el-table-column
            prop="amount_proportion"
            sortable
            label="金额占比"
          ></el-table-column>
          <el-table-column
            prop="number_of_people"
            sortable
            label="次数"
          ></el-table-column>
          <el-table-column
            prop="proportion_of_population"
            sortable
            label="次数占比"
          ></el-table-column>
        </el-table>
      </el-main>
    </div>
  </div>
</template>
<script>
import Server from "../../components/server/Server.vue";
import {sortFun} from "../../utils/index"
let map = new Map();
export default {
  name: "Gearecharge",
  components: { Server },
  data() {
    return {
      tableData: [],
      total_recharge: "",
      server_id: "",
      first_time: "",
      last_time: "",
      loading: false,
      showServer: true,
    };
  },
  mounted() {
    this.first_time = window.localStorage.getItem("first_time");
    this.last_time = window.localStorage.getItem("last_time");
    //获取服务器名称
     this.$http.get("/api/gmtool/getServer").then((res) => {
      res.data.result.forEach((item) => {
        map.set(item.serverId, item.serverName);
      });
    });
  },
  methods: {
    //排序
    sortChange(column, prop, order) {
      if (column.prop === "dollar") {
        this.tableData = this.tableData.sort(
          sortFun(column.prop, column.order === "ascending")
        );
      }
      if (column.prop === "sum_of_money") {
        this.tableData = this.tableData.sort(
          sortFun(column.prop, column.order === "ascending")
        );
      }
    },
    //查询档位充值
    search() {
      var last_time = this.last_time;
      var first_time = this.first_time;
      window.localStorage.setItem("last_time", last_time);
      window.localStorage.setItem("first_time", first_time);
      var server_id = this.$refs.ServerChild.server_id;
      if (server_id == "") {
        this.$message({ type: "warning", message: "请选择需要查询的服务器" });
        return;
      }
      if (first_time / 1000 == "") {
        this.$message({ type: "warning", message: "请选择开始时间" });
        return;
      }
      if (last_time / 1000 == "") {
        this.$message({ type: "warning", message: "请选择结束时间" });
        return;
      }
      this.loading = true;
      this.$http.post("/api/payment/gearecharge", {
          first_time: first_time / 1000,
          last_time: last_time / 1000,
          server_id: server_id,
      }).then((res) => {
          var arr=[];
          if (res.data.code===200) {
            res.data.result.forEach(item=>{
              let obj={
                server_id:map.get(item.server_id),
                dollar:item.dollar,
                sum_of_money: item.sum_of_money,
                amount_proportion: item.amount_proportion,
                number_of_people: item.number_of_people,
                proportion_of_population:item.proportion_of_population
              }
              arr.push(obj)
            })
            this.tableData=arr;
            this.loading = false;
            this.total_recharge = res.data.total_recharge.toFixed(2);
          } else {
            this.loading = false;
            return;
          }
      });
    },
  },
};
</script>
<style scoped>
.gearecharge {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.gearecharge td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>